extends ./layouts/defaultblock 
  title    title Koa Douban 首页
  block content    
  style.        
    header {            
      position: -webkit-sticky;            
      position: sticky;            
      top: 0;            
      background: #00474f;            
      color: #E7DACB;            
      display: flex;            
      justify-content: space-between;            
      align-items: center;            
      height: 50px;            
      z-index: 500;
    }        
    @media (min-width: 768px) {            
      .sidebar {                
        position: -webkit-sticky;                
        position: sticky;                
        top: 4rem;                
        z-index: 1000;                
        height: calc(100vh - 4rem);                
        border-right: 1px solid rgba(0, 0, 0, .1);                
        order: 0;                
        border-bottom: 1px solid rgba(0, 0, 0, .1);            
      }            
      .cat-links {                
        display: block !important;                
        max-height: calc(100vh - 9rem);                
        overflow-y: auto;                
        padding-top: 1rem;                
        padding-bottom: 1rem;                
        margin-right: -15px;                
        margin-left: -15px;            
      }        
    }        
    .sidebar-link {            
      display: block;            
      padding: .25rem 1.5rem;            
      font-weight: 500;            
      color: rgba(0, 0, 0, .65);        
    }        
    .sidebar .nav > li > a {            
      display: block;            
      padding: .25rem 1.5rem;            
      font-size: 90%;            
      color: rgba(0, 0, 0, .65);        
    }        
    .sidebar-item.active > .sidebar-inner {            
      display: block;        
    }        
    .card {            
      margin-bottom: 1.5rem;        
    }        
    .switcher {            
      position: relative;            
      padding: 1rem 15px;            
      margin-right: -15px;            
      margin-left: -15px;           
      border-bottom: 1px solid rgba(0, 0, 0, .05);        
    }        
    .sidebar-toggle {            
      line-height: 1;            
      color: #212529;        
    }        
    .p-0 {            
      padding: 0 !important;        
    }        
    .ml-3, .mx-3 {           
      margin-left: 1rem !important;        
    }        
    .btn-link {            
      font-weight: 400;            
      color: #007bff;            
      background-color: transparent;        
    }    
      include ./includes/header    
      .container-fluid        
        .row            
          .col-12.col-md-3.col-xl-2.sidebar                
            .collapse.cat-links                    
            .sidebar-item.active                        
            a.sidebar-link(href='/') Links                        
            ul.nav.sidebar-inner                            
            li.active.sidebar-inner-active                                
            a(href='/') Link1                            
            li.sidebar-inner-active                                
            a(href='/') Link2            
          .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content                
            .row                    
              .col-md-6                        
              .card                            
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')                            
              .card-body                                
              h4.card-title 这是电影标题                                
              p.card-desc 这是电影描述                            
              .card-footer                                
              small.text-muted 1 天前更新                    
              .col-md-6                        
              .card                            
              img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')                            
              .card-body                                
              h4.card-title 这是电影标题                                
              p.card-desc 这是电影描述                            
              .card-footer                                
              small.text-muted 1 天前更新                
              .row                    
              .col-md-6                        
              .card                            
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')                            
              .card-body                                
              h4.card-title 这是电影标题                                
              p.card-desc 这是电影描述                            
              .card-footer                                
              small.text-muted 1 天前更新                    
              .col-md-6                        
              .card                            
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')                            
              .card-body                                
              h4.card-title 这是电影标题                                
              p.card-desc 这是电影描述                            
              .card-footer                                
              small.text-muted 1 天前更新    
              #myModal.modal.fade.bd-example-modal-lg(tabindex="-1",role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")        
              .modal-dialog.modal-lg            
              #videoModal.modal-content    
              include ./includes/scripts    
              script.        
              var player = null        
              $(document).ready(function () {            
                $("#myModal").on("hidden.bs.modal", function (e) {                
                  if (player && player.pause) player.pause()            
                  })            
                  $(".card-img-top").click(function (e) {                
                    var video = $(this).data("video")                
                    var image = $(this).attr("src")                
                    $("#myModal").modal("show")                
                    if (!player) {                    
                      player = new DPlayer({                        
                        container: document.getElementById("videoModal"),                        
                        screenshot: true,                        
                        video: {                            
                          url: video,                            
                          pic: image,                            
                          thumbnails: image,                        
                          }                    
                          })                
                          } else {                    
                            if (play.video.currentSrc !== video) {                        
                              player.switchVideo({                            
                                url: video,                            
                                pic: image,                            
                                type: "auto"                        
                                })                    
                                }                
                                }            
                                })       
                                })